<template>
    <div class="page">
        <div class="scorll">
            <div class="content">
                <div class="mb30 flexbet">
                    <div>
                        <p class="topfont">深基坑设备分布图</p>
                        <p>展示深基坑周边各类监测设备的分布情况</p>
                    </div>
                    <div class="flexbet">
                        <el-select
                            v-model="period"
                            placeholder="请选择"
                            class="select120"
                        >
                            <el-option
                                v-for="item in topOpt3"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>

                        <div class="mybtn bluebtn ml10">
                            <img src="../../../static/pit/fresh1.png" /><span
                                >刷新数据</span
                            >
                        </div>
                        <div class="mybtn ml10">
                            <img src="../../../static/pit/download.png" /><span
                                >导出地图</span
                            >
                        </div>
                    </div>
                </div>
                <div class="monitorList">
                    <el-card
                        class="boxcard"
                        v-for="(item, index) in monitorList"
                        :class="'bord' + index"
                        :key="index"
                    >
                        <div class="flexbet mid">
                            <div class="flexcol">
                                <span class="black bord">{{ item.name }}</span>
                                <span class="bigfont">{{ item.data }}</span>
                                <div
                                    class="flexrow cent"
                                    :class="index == 2 ? 'red' : 'green'"
                                >
                                    <i
                                        :class="
                                            item.changeStatus == 1
                                                ? 'el-icon-top'
                                                : 'el-icon-bottom'
                                        "
                                    ></i>

                                    <div>
                                        <div class="flexcol f14">
                                            <span
                                                >较上周{{
                                                    item.changeStatus == 1
                                                        ? "增长"
                                                        : "减少"
                                                }}</span
                                            >
                                            <span>
                                                {{ item.changeData }}%
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="iconbox" :class="'iconbg' + index">
                                <img :src="item.iconUrl" class="totalicon" />
                            </div>
                        </div>
                    </el-card>
                </div>
                <el-row class="mb30" :gutter="20">
                    <div class="item card map">
                        <div class="title flexbet">
                            <span class="bold">深基坑实景设备分布</span>
                            <div class="flexbet cent icongroup">
                                <img
                                    v-for="(item, index) in imgList"
                                    :key="index"
                                    :src="item"
                                />
                            </div>
                        </div>
                        <div class="imgbox">
                            <img
                                class="bg"
                                src="../../../static/pit/demo.jpg"
                            />
                            <ul>
                                <li
                                    v-for="(item, index) in imgList2"
                                    :key="index"
                                >
                                    <img
                                        :src="item.url"
                                        class="coverpoint"
                                        :style="item.style"
                                        @click="showDialog(item, index)"
                                    />
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-row>
                <el-row class="mb30" :gutter="20">
                    <el-col :span="12">
                        <div class="item card height400">
                            <div class="title flexbet">
                                <span class="bold">设备类型分布</span>
                            </div>
                            <div
                                id="pointTrend"
                                style="
                                    width: 100%;
                                    height: 300px;
                                    margin: 0 auto;
                                "
                            ></div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="item card height400">
                            <div class="title flexbet">
                                <span class="bold">设备状态统计</span>
                            </div>
                            <div
                                id="statusTrend"
                                style="
                                    width: 100%;
                                    height: 300px;
                                    margin: 0 auto;
                                "
                            ></div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <el-dialog
            :title="dialogtit"
            :visible.sync="dialogVisible"
            width="30%"
            class="dialog"
            :modal="false"
        >
            <ul>
                <li
                    v-for="(item, index) in detailList"
                    :key="index"
                    class="flexbet"
                >
                    <span class="f14 gray">{{ item.name }}</span>
                    <span v-if="index == 3">
                        <span v-if="item.val == '正常'" class="green f16">{{
                            item.val
                        }}</span>
                        <span v-if="item.val == '预警'" class="yellow f16">{{
                            item.val
                        }}</span>
                        <span v-if="item.val == '异常'" class="pink f16">{{
                            item.val
                        }}</span>
                    </span>
                    <span v-else class="black f16">{{ item.val }}</span>
                </li>
            </ul>
            <div
                v-show="dialogActive == 0"
                id="eqTrend0"
                style="width: 100%; height: 200px"
            ></div>
            <div
                v-show="dialogActive == 1"
                id="eqTrend1"
                style="width: 100%; height: 200px"
            ></div>
            <div
                v-show="dialogActive == 2"
                id="eqTrend2"
                style="width: 100%; height: 200px"
            ></div>
            <div
                v-show="dialogActive == 3"
                id="eqTrend3"
                style="width: 100%; height: 200px"
            ></div>
            <div
                v-show="dialogActive == 4"
                id="eqTrend4"
                style="width: 100%; height: 200px"
            ></div>
            <div slot="footer" class="dialog-footer flexbet">
                <div class="mybtn bluebtn" @click="dialogVisible = false">
                    <img src="../../../static/pit/up1.png" /><span
                        >详细数据</span
                    >
                </div>
                <div class="mybtn" @click="dialogVisible = false">
                    <img src="../../../static/pit/set7.png" /><span
                        >设备管理</span
                    >
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            dialogtop: "0",
            dialogActive: 0,
            dialogtit: "",
            color: ["#165dff", "#ff7d00", "#3dd4a7", "#86909c"],
            topList: [
                {
                    name: "监测点数量",
                    val: 48,
                },
                {
                    name: "预警次数",
                    val: 7,
                },
                {
                    name: "数据更新",
                    val: "1分钟前",
                },
                {
                    name: "项目状态",
                    val: "正常",
                },
            ],
            topOpt1: [
                {
                    value: 1,
                    label: "全部类型",
                },
                {
                    value: 2,
                    label: "位移监测",
                },
                {
                    value: 3,
                    label: "沉降监测",
                },
                {
                    value: 4,
                    label: "倾斜监测",
                },
                {
                    value: 5,
                    label: "地下水位",
                },
                {
                    value: 6,
                    label: "支撑轴力",
                },
            ],
            type: 1,
            topOpt2: [
                {
                    value: 1,
                    label: "全部区域",
                },
                {
                    value: 2,
                    label: "东区",
                },
                {
                    value: 3,
                    label: "西区",
                },
                {
                    value: 4,
                    label: "南区",
                },
                {
                    value: 5,
                    label: "北区",
                },
                {
                    value: 6,
                    label: "中区",
                },
            ],
            area: 1,
            topOpt3: [
                {
                    value: 1,
                    label: "最近24小时",
                },
                {
                    value: 2,
                    label: "最近7天",
                },
                {
                    value: 3,
                    label: "最近30天",
                },
                {
                    value: 4,
                    label: "最近90天",
                },
                {
                    value: 5,
                    label: "自定义",
                },
            ],
            period: 2,
            monitorList: [
                {
                    name: "设备总数",
                    data: 146,
                    changeStatus: 1,
                    changeData: 8.2,
                    iconUrl: "../../../static/pit/set5.png",
                },
                {
                    name: "在线设备",
                    data: 138,
                    changeStatus: 1,
                    changeData: 5.4,
                    iconUrl: "../../../static/pit/yes2.png",
                },
                {
                    name: "预警设备",
                    data: 7,
                    changeStatus: 1,
                    changeData: 2.1,
                    iconUrl: "../../../static/pit/warn3.png",
                },
                {
                    name: "异常设备",
                    data: 1,
                    changeStatus: 2,
                    changeData: 33.3,
                    iconUrl: "../../../static/pit/close.png",
                },
            ],
            imgList: [
                "../../../static/pit/big.png",
                "../../../static/pit/small.png",
                "../../../static/pit/fresh2.png",
                "../../../static/pit/suo.png",
            ],
            detailList: [],
            imgList2: [
                {
                    url: "../../../static/pit/biao2.png",
                    style: {
                        top: "25%",
                        left: "20%",
                    },
                    info: {
                        detail: [
                            {
                                name: "设备编号",
                                val: "T01",
                            },
                            {
                                name: "设备类型",
                                val: "倾斜仪",
                            },
                            {
                                name: "安装位置",
                                val: "基坑东侧",
                            },
                            {
                                name: "运行状态",
                                val: "正常",
                            },
                            {
                                name: "最后更新",
                                val: "2025-07-16 10:30:22",
                            },
                        ],
                        echart: {
                            name: "倾斜仪数据(.)",
                            data: [0.12, 0.15, 0.11, 0.13, 0.14, 0.12, 0.13],
                            unit: ".",
                        },
                    },
                },
                {
                    url: "../../../static/pit/arrow5.png",
                    style: {
                        top: "40%",
                        left: "40%",
                    },
                    info: {
                        detail: [
                            {
                                name: "设备编号",
                                val: "D01",
                            },
                            {
                                name: "设备类型",
                                val: "位移计",
                            },
                            {
                                name: "安装位置",
                                val: "基坑南侧",
                            },
                            {
                                name: "运行状态",
                                val: "正常",
                            },
                            {
                                name: "最后更新",
                                val: "2025-07-16 10:30:22",
                            },
                        ],
                        echart: {
                            name: "位移计数据(mm)",
                            data: [2.3, 2.5, 2.4, 2.6, 2.5, 2.7, 2.8],
                            unit: "mm",
                        },
                    },
                },
                {
                    url: "../../../static/pit/camera.png",
                    style: {
                        top: "60%",
                        left: "45%",
                    },
                    info: {
                        detail: [
                            {
                                name: "设备编号",
                                val: "C01",
                            },
                            {
                                name: "设备类型",
                                val: "摄像头",
                            },
                            {
                                name: "安装位置",
                                val: "基坑中心",
                            },
                            {
                                name: "运行状态",
                                val: "异常",
                            },
                            {
                                name: "最后更新",
                                val: "2025-07-16 10:30:22",
                            },
                        ],
                        echart: {
                            name: "摄像头数据(%)",
                            data: [85, 88, 90, 92, 89, 87, 86],
                            unit: "%",
                        },
                    },
                },
                {
                    url: "../../../static/pit/elec.png",
                    style: {
                        top: "20%",
                        left: "50%",
                    },
                    info: {
                        detail: [
                            {
                                name: "设备编号",
                                val: "S01",
                            },
                            {
                                name: "设备类型",
                                val: "应力计",
                            },
                            {
                                name: "安装位置",
                                val: "基坑西侧",
                            },
                            {
                                name: "运行状态",
                                val: "预警",
                            },
                            {
                                name: "最后更新",
                                val: "2025-07-16 10:30:22",
                            },
                        ],
                        echart: {
                            name: "应力计数据(MPa)",
                            data: [18.2, 19.5, 20.1, 21.3, 22.5, 23.1, 24.5],
                            unit: "MPa",
                        },
                    },
                },
                {
                    url: "../../../static/pit/rain3.png",
                    style: {
                        top: "50%",
                        left: "65%",
                    },
                    info: {
                        detail: [
                            {
                                name: "设备编号",
                                val: "W01",
                            },
                            {
                                name: "设备类型",
                                val: "水位计",
                            },
                            {
                                name: "安装位置",
                                val: "基坑北侧",
                            },
                            {
                                name: "运行状态",
                                val: "正常",
                            },
                            {
                                name: "最后更新",
                                val: "2025-07-16 10:30:22",
                            },
                        ],
                        echart: {
                            name: "水位计数据(m)",
                            data: [3.2, 3.1, 3.0, 2.9, 3.0, 3.1, 3.2],
                            unit: "m",
                        },
                    },
                },
            ],
            active0: 0,
            periodOpt: [
                {
                    value: 1,
                    label: "近7天",
                },
                {
                    value: 2,
                    label: "近30天",
                },
                {
                    value: 3,
                    label: "近90天",
                },
            ],
            waterPeriod: 1,
            msgList: [
                {
                    status: 1, ////0正常 1预警
                    title: "西区沉降监测点JC-002超过预警值",
                    desc: "当前沉降量26.8mm，超过预警值25mm（预警阈值：25-30mm）",
                    time: "2023-06-15 09:45",
                    type: 1, //0已处理 1处理中
                },
                {
                    status: 1,
                    title: "南区支撑轴力监测点JC-015波动异常",
                    desc: "1小时内支撑轴力波动值超过15%（正常范围：±10%）",
                    time: "2023-06-15 09:45",
                    type: 0,
                },
                {
                    status: 0,
                    title: "监测设备JC-023信号中断",
                    desc: "东区水平位移监测点JC-023设备信号中断，正在排查原因",
                    time: "2025-05-12 10:20",
                    type: 1,
                },
            ],

            tableData: [
                {
                    id: "JC-001",
                    location: "东区南侧",
                    name: "位移监测",
                    realData: 12.5,
                    unit: "mm",
                    warningData: 40,
                    time: "2025-06-15 10:30",
                    status: 0, //0正常 1预警 2异常
                },
                {
                    id: "JC-002",
                    location: "西区北侧",
                    name: "沉降监测",
                    realData: 26.8,
                    unit: "mm",
                    warningData: 30,
                    time: "2025-06-15 10:30",
                    status: 1,
                },
                {
                    id: "JC-003",
                    location: "中区",
                    name: "地下水位",
                    realData: 5.4,
                    unit: "m",
                    warningData: 6.5,
                    time: "2025-06-15 10:30",
                    status: 0,
                },
                {
                    id: "JC-004",
                    location: "南区",
                    name: "支撑轴力",
                    realData: 1250,
                    unit: "kN",
                    warningData: 1800,
                    time: "2025-06-15 10:30",
                    status: 0,
                },
                {
                    id: "JC-005",
                    location: "东区北侧",
                    name: "倾斜监测",
                    realData: 0.08,
                    unit: "°",
                    warningData: 0.3,
                    time: "2025-06-15 10:30",
                    status: 0,
                },
            ],
        };
    },
    computed: {},
    watch: {},
    mounted() {
        this.totalList = [
            {
                name: "监测点总数",
                realTimeData: 128,
                unit: "",
                changeStatus: 1, //0降低 1增长
                changeData: 5.2,
                iconUrl: "../../static/pit/location.png",
            },
            {
                name: "报警总数",
                realTimeData: 23,
                unit: "",
                changeStatus: 0, //0降低 1增长
                changeData: 12.3,
                iconUrl: "../../static/pit/warn.png",
            },
            {
                name: "设备在线率",
                realTimeData: 96.8,
                unit: "%",
                changeStatus: 1, //0降低 1增长
                changeData: 2.1,
                iconUrl: "../../static/pit/wifi.png",
            },
            {
                name: "数据采集量",
                realTimeData: 12.5,
                unit: "K",
                changeStatus: 1, //0降低 1增长
                changeData: 8.2,
                iconUrl: "../../static/pit/data.png",
            },
        ];

        this.pointTrendFn();
        this.statusFn();
    },
    methods: {
        pointTrendFn() {
            let pointTrend = this.$echarts.init(
                document.getElementById("pointTrend")
            );
            pointTrend.setOption({
                color: ["#36D399", "#3ABFF8", "#165DFF", "#FBBD23", "#F87272"],
                tooltip: {
                    trigger: "item",
                    backgroundColor: "#333",
                    textStyle: {
                        color: "#fff",
                    },
                    formatter: "{b0} : {c0}({d0}%)",
                },
                legend: {
                    bottom: "0%",
                    left: "center",
                    itemWidth: 10,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    data: [
                        { name: "倾斜仪", icon: "circle" },
                        { name: "位移仪", icon: "circle" },
                        { name: "应力计", icon: "circle" },
                        { name: "水位计", icon: "circle" },
                        { name: "摄像头", icon: "circle" },
                    ],
                },
                series: [
                    {
                        type: "pie",
                        radius: ["50%", "80%"],
                        avoidLabelOverlap: false,
                        center: ["50%", "40%"],
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            { value: 42, name: "倾斜仪" },
                            { value: 35, name: "位移仪" },
                            { value: 28, name: "应力计" },
                            { value: 21, name: "水位计" },
                            { value: 20, name: "摄像头" },
                        ],
                    },
                ],
            });
        },
        statusFn() {
            let statusTrend = this.$echarts.init(
                document.getElementById("statusTrend")
            );
            statusTrend.setOption({
                tooltip: {
                    trigger: "item",
                    backgroundColor: "#333",
                    textStyle: {
                        color: "#fff",
                    },
                    formatter: "{b0}<br/>{a0} : {c0}个",
                },
                grid: {
                    left: "2%",
                    right: "2%",
                    top: "3%",
                    bottom: "0%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    data: ["正常", "预警", "异常", "离线"],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#EBEEF5",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#7a7b7c",
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    max: 140,
                    splitNumber: 8,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#EBEEF5",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#7a7b7c",
                        },
                    },
                },
                series: [
                    {
                        name: "设备数量",
                        data: [
                            {
                                value: 138,
                                itemStyle: {
                                    color: "#36D399",
                                },
                            },
                            {
                                value: 7,
                                itemStyle: {
                                    color: "#FBBD23",
                                },
                            },
                            {
                                value: 1,
                                itemStyle: {
                                    color: "#F87272",
                                },
                            },
                            {
                                value: 0,
                                itemStyle: {
                                    color: "#6B7280",
                                },
                            },
                        ],
                        type: "bar",
                    },
                ],
            });
        },
        changeActive0(index) {
            this.active0 = index;
        },
        showDialog(item, index) {
            this.dialogVisible = true;

            this.dialogActive = index;
            this.detailList = item.info.detail;
            this.dialogtit =
                this.detailList[1].val + "-" + this.detailList[0].val;
            this.$nextTick(() => {
                this.eqTrendFn(item.info.echart, index);
            });
        },
        eqTrendFn(data, index) {
            const id = "eqTrend" + index;
            console.log(id);
            let eqTrend = this.$echarts.init(document.getElementById(id));
            eqTrend.setOption({
                color: ["#165DFF"],
                grid: {
                    left: "2%",
                    right: "2%",
                    top: "5%",
                    bottom: "0%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "#333",
                    textStyle: {
                        color: "#fff",
                    },
                    axisPointer: {
                        type: "",
                    },
                    //formatter: "{b0}<br/>{a0}: {c0}个"
                },

                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            rotate: 45,
                            interval: 0,
                            margin: 10, // 调整标签与刻度线之间的距离
                        },
                        axisTick: {
                            alignWithLabel: true, // 确保标签与刻度线对齐
                        },
                        data: [
                            "08:00",
                            "09:00",
                            "10:00",
                            "11:00",
                            "12:00",
                            "13:00",
                            "14:00",
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        // max: 90,
                        // splitNumber: 10,
                    },
                ],
                series: [
                    {
                        name: data.name,
                        type: "line",
                        stack: "Total",
                        areaStyle: {
                            color: "#B9DDFF",
                        },
                        emphasis: {
                            focus: "series",
                        },
                        data: data.data,
                    },
                ],
            });
        },
    },
};
</script>

<style scoped lang="scss">
.page {
    width: 100%;
    background: #f5f5f5;
    padding: 20px 10px;
    .content {
        background: #fff;
        padding: 30px;
        font-size: 16px;
        color: #7a7b7c;
        .card {
            border-radius: 10px;
            -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
    }
}

.flexrow {
    display: flex;
    flex-direction: row;
}
.flexcol {
    display: flex;
    flex-direction: column;
}

.flexbet {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.flexwrap {
    display: felx;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.cent {
    align-items: center;
}
.f14 {
    font-size: 14px;
}
.f12 {
    font-size: 12px;
}
.f16 {
    font-size: 16px;
}
.f18 {
    font-size: 18px;
}
.f20 {
    font-size: 20px;
}
.bold {
    font-weight: 800;
}
.mb30 {
    margin-bottom: 30px;
}
.mt10 {
    display: inline-block;
    margin-top: 10px;
}
.mr20 {
    margin-right: 20px;
}
.mr10 {
    margin-right: 10px;
}
.ml10 {
    margin-left: 10px;
}

.pad20 {
    padding: 20px;
}
.top {
    align-items: center;
    .subtit {
        color: #7a7b7c;
        margin-top: 5px;
        i {
            margin-right: 5px;
        }
    }
    .right {
        li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px 15px;
            background: #f2f3f5;
            margin-left: 20px;
            border-radius: 10px;
            color: #7a7b7c;
            .f18 {
                font-weight: 800;
                margin-top: 5px;
            }
            .font0 {
                color: #165dff;
            }
            .font1 {
                color: #ff7d00;
            }
            .font2,
            .font3 {
                color: #00b42a;
            }
        }
    }
    .el-select {
        margin-top: 10px;
        width: 150px;
        padding-right: 10px;
    }
}
.monitorList {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin: 20px 0;

    .boxcard {
        width: 24%;
        //color: #7a7b7c;
        border-radius: 15px;
        .tit {
            align-items: center;
            .tag {
                border-radius: 30px;
                width: 50px;
                text-align: center;
                font-size: 14px;
                padding: 3px 0;
            }
            .tag0 {
                color: #165dff;
                background: #e7eeff;
            }
            .tag1 {
                color: #ff7d00;
                background: #fff2e5;
            }
            .tag2 {
                color: #3dd4a7;
                background: #e7f9f9;
            }
            .tag3 {
                color: #86909c;
                background: #f3f4f5;
            }
        }
        .mid {
            align-items: center;
            // padding: 20px 0;
            // border-bottom: 1px solid #f2f6fc;
            .iconbox {
                width: 50px;
                height: 60px;
                border-radius: 10px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                .totalicon {
                    width: 20px;
                    height: 20px;
                }
            }
            .iconbg0 {
                background: #e7eeff;
            }
            .iconbg1 {
                background: #e7f9f9;
            }
            .iconbg2 {
                background: #fff2e5;
            }
            .iconbg3 {
                background: #feebeb;
            }
        }

        .bigfont {
            font-size: 36px;
            color: #000;
            font-weight: 800;
            margin-right: 10px;
        }
    }
    .bord0 {
        border-left: 5px solid #165dff;
    }
    .bord1 {
        border-left: 5px solid#3dd4a7;
    }
    .bord2 {
        border-left: 5px solid #ff7d00;
    }
    .bord3 {
        border-left: 5px solid #f87272;
    }
}

.map {
    .imgbox {
        width: 100%;
        height: 600px;
        border-radius: 10px;
        position: relative;
        .bg {
            width: 100%;
            height: 600px;
            border-radius: 10px;
        }
        .coverpoint {
            width: 25px;
            height: 25px;
            position: absolute;
        }
    }
}

.item {
    padding: 20px;
}
.title {
    width: 100%;
    margin-bottom: 20px;
    height: 40px;
    align-items: center;
    .bold {
        color: #000;
        font-size: 20px;
    }
    .rightfont {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}
.msgbox {
    height: 340px;
    li {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;

        font-size: 14px;
        .iconbox {
            width: 30px;
            height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            margin-right: 10px;
        }
        .lefticon {
            width: 20px;
        }
        .black {
            display: inline-block;
        }

        .tag {
            padding: 5px 15px;
            background: #f3f4f6;
            font-size: 12px;
            margin-right: 20px;
            border-radius: 15px;
        }
        .tag0 {
            background: #dcfce7 !important;
        }
        .tag1 {
            background: #fef9c3 !important;
        }
        .tip0 {
            color: #86909c;
        }
        .tip1 {
            color: #ff7d00;
            background: #ffecd9 !important;
        }
    }
    .msg1 {
        border-left: 4px solid #ff7d00;
        background: #fff8f2;
    }
    .msg0 {
        border-left: 4px solid #86909c;
        background: #f9f9fa;
    }
}

.btntag {
    display: inline-block;
    // padding: 3px 12px;
    // background: #f2f3f5;
    color: #999;
    margin-right: 10px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}

.active0 {
    // background: #e7eeff !important;
    color: #2762ef !important;
}

.black {
    color: #000;
}
.red {
    color: #f53f3f;
}
.green {
    color: #00b42a;
}
.blue {
    color: #2762ef;
}
.gray {
    color: #7a7b7c;
}
.greenbg {
    background: #00b42a;
}
.yellowbg {
    background: #ff7d00;
}
.redbg {
    background: #f53f3f;
}
.circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 5px;
}

.select {
    margin-right: 10px;
    width: 150px;
}
.tabletag {
    border-radius: 30px;
    width: 45px;
    padding: 0;
    text-align: center;
    height: 25px;
    line-height: 22px;
    background: #dcfce7;
    border: none;
    color: #6c6b6b;
}
.warntag {
    color: #4d4204 !important;
    background: #f7f2be !important;
}
/deep/.el-table thead th {
    background: #f2f2f2 !important;
    color: #333;
    font-weight: 400;
}
.topfont {
    color: #000;
    font-weight: 800;
    font-size: 30px;
}
.tablebox {
    .bot {
        color: #333;
        font-size: 14px;
        margin-top: 20px;
    }
}
.bluebtn {
    background: #165dff;
    color: #fff;
    font-size: 16px;
    height: 40px;
    border-radius: 10px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #165dff;
}
.dialog {
    li {
        margin-bottom: 10px;
    }
    .dialog-footer {
        .mybtn {
            width: 45%;
        }
    }
}
.icongroup {
    img {
        width: 20px;
        height: 20px;
        margin-left: 10px;
    }
}
.height400 {
    height: 400px;
}
.mybtn {
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e7ed;
    border-radius: 10px;
    height: 40px;
    padding: 0 10px;
    img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }
}
.img20 {
    width: 20px;
    height: 20px;
}
.select120 {
    width: 120px;
}
</style>
